/* The comparison stays full-width; its controls sit beneath the detail portrait. */
.scale-stage {aspect-ratio:auto;}
.scale-viewport {position:relative;aspect-ratio:1400/640;z-index:1;}
.scale-viewport>#scale-canvas {display:block;width:100%;height:100%;object-fit:fill;background:transparent;}
.scale-object-labels {position:relative;height:42px;margin:8px 0 16px;z-index:2;pointer-events:none;}
.scale-object-labels>div {width:160px;max-width:45%;transform:translate3d(var(--scale-label-x,0px),0,0) translateX(-50%);text-align:center;white-space:normal;line-height:1.5;}
.scale-label-name {display:block;text-transform:uppercase;}
.scale-label-diameter {display:block;margin-top:3px;font-size:var(--type-caption);font-variant-numeric:tabular-nums;letter-spacing:normal;color:var(--muted);white-space:nowrap;}
#scale .scale-ratio-readout {position:absolute;left:clamp(20px,3.4%,48px);bottom:20px;z-index:3;margin:0;max-width:min(26%,300px);padding:12px 16px;background:var(--ink);color:var(--paper);pointer-events:none;}
#scale-ratio-value {display:block;font-size:clamp(44px,4.4vw,68px);font-weight:400;line-height:1.05;letter-spacing:-.035em;font-variant-numeric:tabular-nums;}
#scale-ratio-caption {display:block;margin-top:8px;font-size:var(--type-caption);line-height:1.5;color:var(--muted);overflow-wrap:anywhere;}
.scale-detail {top:43%;}
.scale-stage .scale-controls {
  position:absolute;z-index:4;left:85.714%;top:min(57%,calc(100% - 240px));width:27%;max-width:360px;
  transform:translateX(-50%);display:grid;gap:16px;margin:0;padding:12px 0 0;
  border-top:1px solid #c4d2ea38;
}
.scale-controls::before {
  content:"";position:absolute;z-index:-1;inset:-14px -18px;
  background:radial-gradient(ellipse at center,#080c16ed 45%,#080c1600 74%);pointer-events:none;
}
.scale-controls label {font-size: var(--type-control); line-height: 1.4; color: var(--muted);}
.scale-controls .scale-selector>label {margin-bottom: 8px; min-width: 0; color: var(--muted);}
.scale-selector-row,.scale-zoom-row {display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;}
.scale-controls #scale-world {
  width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;
  padding-inline-end:calc(var(--space-3) + 14px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23f0ede7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:10px 6px;
  background-position:right calc(6px + 4px) center;
}
@media(forced-colors:active) {
  .scale-controls #scale-world {appearance:auto;-webkit-appearance:auto;background-image:none;}
}

.scale-controls svg {width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;}

.scale-zoom-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}
.scale-zoom-heading output {font-size: var(--type-control); font-variant-numeric: tabular-nums; color: var(--paper); white-space: nowrap;}
.scale-controls #scale-zoom {appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y;}
.scale-controls #scale-zoom::-webkit-slider-runnable-track {height:3px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--zoom-fill,0%),#bec8e02b var(--zoom-fill,0%));}
.scale-controls #scale-zoom::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:13px;height:13px;margin-top:-5px;border:0;border-radius:50%;background:var(--accent);}
.scale-controls #scale-zoom::-moz-range-track {height:3px;border-radius:3px;background:#bec8e02b;}
.scale-controls #scale-zoom::-moz-range-progress {height:3px;border-radius:3px;background:var(--accent);}
.scale-controls #scale-zoom::-moz-range-thumb {width:13px;height:13px;border:0;border-radius:50%;background:var(--accent);}
.scale-fit-button {display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; width: 100%; padding: 10px 14px;}

/* Keep a real 1400:640 drawing viewport on compact screens; controls flow below. */
@media(max-width:1279px) {
  .scale-stage {aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);column-gap:24px;}
  .scale-viewport {position:relative;aspect-ratio:1400/640;grid-column:1/-1;}
  .scale-object-labels {position:relative;bottom:auto;grid-column:1/-1;height:48px;margin:8px 0 12px;}
  #scale .scale-ratio-readout {position:static;align-self:end;max-width:none;margin:12px 0 24px 24px;padding:0;background:transparent;}
  .scale-stage .scale-controls {position:relative;left:auto;top:auto;transform:none;width:min(340px,calc(100% - 32px));max-width:none;margin:8px 16px 20px auto;}
}
@media(max-width:760px) {
  .scale-stage {display:block;}
  .scale-object-labels {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;height:auto;margin:12px 0 24px;padding:0 16px;}
  .scale-object-labels>div {position:static;width:auto;max-width:none;transform:none;}
  #scale .scale-ratio-readout {margin:20px 24px 24px;}
  #scale-ratio-value {font-size:44px;}
}
@media(max-width:600px) {
  .scale-stage .scale-controls {width:calc(100% - 32px);margin:20px 16px;gap:18px;}
  
  .scale-controls label,.scale-fit-button {font-size: var(--type-caption);}
  .scale-controls::before {display:none;}
}
@media(prefers-reduced-motion:reduce) {.scale-controls button {transition:none;}}