/* ==========================================================================
   RESPONSIVE + MOTION overrides
   Loaded last so these win over the component defaults.
   ========================================================================== */

/* Narrow screens: the ladder drops the third column and stacks the value
   under the name, so the row grows to accommodate it. --row-h is read by
   the ladder JS, which is why the height change lives in a custom property. */
@media(max-width:620px){
  :root{--row-h:78px}
  .lrow{grid-template-columns:106px 1fr;grid-template-rows:auto auto;gap:4px 12px}
  .lval{grid-column:2;text-align:left}
  .track{grid-column:2}
  .lname{grid-row:1/3}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}