/* /tools/{slug}: loading states for the live widgets and the calculators' live-data fields.
   Loaded render-blocking by tools.php so the skeleton is styled at first paint. Motion tokens and the
   .sk primitives come from motion.css. Only opacity/transform animate. */

/* Widget skeleton (market hours, currency strength): rows reuse the real row classes so heights match. */
.tw-dot{width:9px;height:9px;flex-shrink:0}
.tw-fill{position:absolute;inset:0;border-radius:inherit}
/* One bar per text line of the note: 1.2rem / 1.17rem tall like the real line-height, no margins (they would collapse).
   How many lines the note wraps to depends on the width; the breakpoints below were measured on the finished pages. */
.tw-note .sk-line{--h:.8rem;box-sizing:content-box;height:var(--h);margin:0;border-block:.2rem solid transparent;background-clip:content-box;border-radius:0}
.tool-note.tw-note .sk-line{--h:.77rem}
.tw-l2,.tw-l3{display:none!important}
@media (max-width:559px){.tw-m .tw-l2{display:block!important}}
@media (min-width:900px) and (max-width:999px){.tw-m .tw-l2{display:block!important}}
@media (max-width:339px){.tw-m .tw-l3{display:block!important}}
@media (max-width:749px),(min-width:900px){.tw-s .tw-l2{display:block!important}}
@media (max-width:409px){.tw-s .tw-l3{display:block!important}}

/* A field being filled from a live source: the old value is hidden and the box breathes until it lands. */
.tool input.tl-wait{color:transparent;caret-color:transparent;opacity:.55}
@media (prefers-reduced-motion:no-preference){
  .tool input.tl-wait{animation:tl-wait 1s var(--ease-io) infinite}
}
@keyframes tl-wait{50%{opacity:.9}}
.tool-note .sk-t{vertical-align:-.12em}