/* TUNAI motion kit (docs/MOTION_PROPOSALS.md). Loaded after daylight.css on every kit page.
   Rule: state is data, motion is the transition between states. Only transform and opacity move. Reduced motion shows every
   state, one frame at a time. Nothing here loads from, or talks to, a third party. */
:root{
  --m-out:cubic-bezier(.16,1,.3,1);   /* arrivals */
  --m-io:cubic-bezier(.65,0,.35,1);   /* travel */
  --m-t-micro:140ms;--m-t-std:380ms;--m-t-story:800ms;
}
/* Proposal 9: a skeleton is the real card's notched shape, so what replaces it does not move the page */
.sk-list{list-style:none;margin:0;padding:0}
.sk-row{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;min-height:118px;padding:16px;margin:0 0 12px;
  background:var(--base);border:1.5px solid var(--rule);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.sk-row i{display:block;background:var(--sand)}
.sk-row .a{width:44px;height:44px}
.sk-row .b{height:16px;width:60%;margin:4px 0 12px}
.sk-row .c{height:11px;width:85%;margin-bottom:10px}
.sk-row .c+.c{width:55%}
.sk-row::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--lime) 55%,transparent) 50%,transparent 65%);
  transform:translateX(-100%);animation:sk-sweep 1.3s var(--m-io) infinite}
.sk-row:nth-child(2)::after{animation-delay:.12s}.sk-row:nth-child(3)::after{animation-delay:.24s}
@keyframes sk-sweep{to{transform:translateX(100%)}}
/* Proposal 2: the jobs-home reel has a real Pause control (phones only: the reel is a phone feature) */
.hs-pause{display:none;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;margin:0 0 6px;
  background:transparent;color:#fff;border:1.5px solid #fff;cursor:pointer;
  font:700 .74rem var(--f-m);letter-spacing:.08em;text-transform:uppercase}
.hs-pause:focus-visible{background:var(--lime);color:#111827;border-color:var(--lime)}
@media(hover:hover){.hs-pause:hover{background:var(--lime);color:#111827;border-color:var(--lime)}}
.hs-pause i{display:inline-block;width:10px;height:12px;border-left:3.5px solid currentColor;border-right:3.5px solid currentColor}
.hs-pause[aria-pressed="true"] i{width:0;height:0;border:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
@media(max-width:700px){.hs-pause{display:inline-flex}}
@media(prefers-reduced-motion:reduce){.sk-row::after{animation:none;opacity:0}.hs-pause{display:none}}
/* Proposal 10 (cross-document View Transitions, the page fade) was withdrawn 2026-10-18: with the opt-in on, a search form submit
   raised "Transition was aborted because of invalid state. ViewTransition opt-in disabled" as a page error (12 site BDD
   scenarios on dev, the hostile-search ones locally), and on a real Samsung S26 Ultra the fade never ran on our pages although a
   bare two-page test on the same phone did. See docs/MOTION_PROPOSALS.md section 16 before putting it back. */

/* Proposal 4 (the part the job page can say truthfully): the fit check's skills meter. One segment per named skill, filled for each
   one the pasted lines mention, left to right, 60 ms apart. A count, not a grade. */
.fit-meter{display:flex;gap:5px;margin:8px 0 10px}
.fit-meter i{flex:1;max-width:34px;height:22px;background:var(--sand);position:relative;overflow:hidden}
.fit-meter i::after{content:"";position:absolute;inset:0;background:var(--lime);transform:scaleY(0);transform-origin:bottom;transition:transform var(--m-t-std) var(--m-out)}
.fit-meter i.f::after{transform:scaleY(1)}
.fit-meter i:nth-child(2)::after{transition-delay:60ms}.fit-meter i:nth-child(3)::after{transition-delay:120ms}.fit-meter i:nth-child(4)::after{transition-delay:180ms}
.fit-meter i:nth-child(5)::after{transition-delay:240ms}.fit-meter i:nth-child(6)::after{transition-delay:300ms}.fit-meter i:nth-child(7)::after{transition-delay:360ms}
.fit-meter i:nth-child(8)::after{transition-delay:420ms}.fit-meter i:nth-child(9)::after{transition-delay:480ms}.fit-meter i:nth-child(10)::after{transition-delay:540ms}
@media(prefers-reduced-motion:reduce){.fit-meter i::after{transition:none}}

/* Proposal 4: typical pay on the job page (typical_pay.py). The track is drawn complete in the markup (positions are custom
   properties), so with no script and with reduced motion the picture is the finished one. When the script marks it .pre the band
   collapses and grows back, and the job marker drops in, once, as it scrolls into view. */
.typpay{margin:22px 0}
.tp-track{position:relative;height:60px;margin:30px 0 6px}
.tp-rail{position:absolute;left:0;right:0;top:34px;height:10px;background:var(--sand)}
.tp-band{position:absolute;left:0;top:34px;height:10px;width:100%;background:var(--cobalt);transform-origin:0 50%;
  transform:translateX(calc(var(--bl)*1%)) scaleX(calc(var(--bw)/100));transition:transform var(--m-t-story) var(--m-out)}
.tp-job{position:absolute;left:calc(var(--jl)*1%);width:calc(var(--jw)*1%);min-width:8px;top:26px;height:26px;background:var(--lime);
  border:2px solid var(--ink);transition:transform var(--m-t-std) var(--m-out),opacity var(--m-t-std)}
.tp-lab{position:absolute;left:calc(var(--jl)*1%);top:0;font:700 .62rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;
  background:var(--lime);color:#111827;padding:2px 6px;white-space:nowrap;max-width:60%}
.tp-track.pre:not(.in) .tp-band{transform:translateX(calc(var(--bl)*1%)) scaleX(0)}
.tp-track.pre:not(.in) .tp-job{transform:translateY(-14px);opacity:0}
.tp-track.pre .tp-job{transition-delay:calc(var(--m-t-story)*.6)}
.tp-fine{color:var(--ink2);font-size:.85rem}
@media(prefers-reduced-motion:reduce){.tp-band,.tp-job{transition:none}}