/* SCALE — proportional-area squares, corner-aligned so they nest. */
.scl{display:grid;gap:1.15rem}
.scl__ctrls{padding-bottom:.15rem}

.scl__body{
  display:grid;gap:clamp(1.1rem,2.6vw,2rem);
  grid-template-columns:minmax(11rem,27rem) minmax(13rem,26rem);
  justify-content:start;align-items:end;
}

/* ---------------------------------------------------------------- the plot */
.scl__plot{
  position:relative;width:100%;aspect-ratio:1/1;
  background:
    linear-gradient(to right,var(--line-soft) 1px,transparent 1px) 0 100%/12.5% 12.5%,
    linear-gradient(to bottom,var(--line-soft) 1px,transparent 1px) 0 100%/12.5% 12.5%,
    var(--surface-2);
  border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  border-radius:0;overflow:hidden;
}

.scl__sq{
  position:absolute;left:0;bottom:0;
  background:color-mix(in srgb,var(--c) 16%,transparent);
  box-shadow:inset 0 0 0 1px var(--c);
  transition:width var(--dur-3) var(--ease),height var(--dur-3) var(--ease),
             opacity var(--dur-2) var(--ease),box-shadow var(--dur-1) var(--ease),
             background var(--dur-1) var(--ease);
}
.scl__sq--debt{--c:var(--red);z-index:1}
.scl__sq--slots{--c:var(--slate);z-index:2}
.scl__sq--archive{--c:var(--cyan);z-index:3}

/* a square bigger than the frame is drawn as the ground you are standing on,
   not as a box with edges it does not have here */
.scl__sq.is-over{
  width:100%!important;height:100%!important;
  background:color-mix(in srgb,var(--c) 9%,transparent);box-shadow:none;
}
.scl__plot.is-sel .scl__sq{opacity:.4}
.scl__plot.is-sel .scl__sq.is-on{
  opacity:1;background:color-mix(in srgb,var(--c) 30%,transparent);
  box-shadow:inset 0 0 0 2px var(--c),0 0 26px -6px var(--c);
}

/* on-shape figure, for squares with room for it */
.scl__tag{
  position:absolute;left:.4rem;top:.34rem;display:grid;gap:.05rem;
  transition:opacity var(--dur-2) var(--ease);pointer-events:none;
}
.scl__tag b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.72rem;font-weight:500;letter-spacing:-.02em;color:var(--text)}
.scl__tag i{font-family:var(--mono);font-style:normal;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.scl__sq.is-tiny .scl__tag,.scl__sq.is-over .scl__tag{opacity:0}
/* a speck has to be findable before it can be understood */
.scl__sq.is-tiny{box-shadow:inset 0 0 0 1px var(--c),0 0 14px -1px var(--c)}

.scl__over{
  position:absolute;right:.55rem;top:.5rem;max-width:11rem;text-align:right;
  font-family:var(--mono);font-size:.6rem;line-height:1.5;letter-spacing:.03em;
  color:var(--red-2);opacity:0;transition:opacity var(--dur-2) var(--ease);pointer-events:none;
}
.scl__over b{font-weight:500;color:var(--red-2);display:block;letter-spacing:-.02em;font-size:.7rem}
.scl__plot.has-over .scl__over{opacity:1}

/* -------------------------------------------------------------- the legend */
.scl__side{display:grid;gap:.9rem;align-content:end}
.scl__legend{display:grid;gap:.15rem}
.scl__row{
  display:flex;align-items:flex-start;gap:.3rem;
  border-top:1px solid var(--line);padding:.1rem 0;
  transition:opacity var(--dur-2) var(--ease);
}
.scl__legend:hover .scl__row:not(.is-on),
.scl__legend:focus-within .scl__row:not(.is-on){opacity:.5}

.scl__rbtn{
  flex:1;min-width:0;display:flex;gap:.6rem;align-items:flex-start;text-align:left;
  padding:.55rem .3rem;border-radius:var(--radius);min-height:2.5rem;
  transition:background var(--dur-1) var(--ease);
}
.scl__rbtn:hover{background:var(--surface-2)}
.scl__row.is-on .scl__rbtn{background:var(--surface-2)}

.scl__sw{width:.7rem;height:.7rem;flex:none;margin-top:.34rem;border-radius:2px;background:var(--c);opacity:.85}
.scl__row--debt{--c:var(--red)}
.scl__row--slots{--c:var(--slate)}
.scl__row--archive{--c:var(--cyan)}

.scl__meta{display:grid;gap:.14rem;min-width:0}
.scl__fig{font-size:.94rem;font-weight:500;color:var(--text);letter-spacing:-.03em;line-height:1.1}
.scl__row.is-on .scl__fig{color:var(--c)}
.scl__name{font-size:.8rem;line-height:1.35;color:var(--text-2)}
.scl__unit{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4)}
.scl__cite{padding-top:.62rem;flex:none}

.scl__read{
  font-size:.62rem;letter-spacing:.05em;color:var(--text-4);line-height:1.5;
  border-top:1px solid var(--line);padding-top:.6rem;
}

.scl__axnote{
  font-size:.63rem;line-height:1.55;letter-spacing:.03em;color:var(--text-4);max-width:44rem;
}

/* --------------------- narrow: plot on top, legend under ----------------- */
@media (max-width:760px){
  .scl__body{grid-template-columns:1fr;align-items:start}
  .scl__plot{width:min(100%,21rem);margin-inline:auto}
  .scl__side{max-width:none}
  .scl__side{align-content:start}
  .scl__ctrls{gap:.4rem}
}
@media (max-width:520px){
  .scl__ctrls .ctrls__lab{flex-basis:100%;margin-bottom:.1rem}
}
@media (max-width:420px){
  .scl__tag b{font-size:.66rem}
  .scl__fig{font-size:.88rem}
  .scl__over{max-width:9rem}
}