/* ═══ HER JOBS, TRUE TO THE WORK (15 Sep 2026) ══════════════════════════════
   Source: frontend/_jobs_sep15/jobs.css, served at /_jobs.css, included at the
   very end of concept.html so it has the last word at equal weight.

   1. THE WATCH ROOM, SECOND BUILD - the real video, playing up to the second
      she has reached and never past it; the scan line while her eyes walk it,
      a pulse while her ears do; the passes in the order they really run.
   2. WHAT EACH JOB FOUND - a quiet line under the row, the list behind a tap.
   3. HER THINKING - her words while she thinks, on the row they came from.
   Her hand (--pen) only for what is hers and never under 15px; the interface
   parts stay Inter; her voice stays the serif. */

/* ── 1. the watch room ─────────────────────────────────────────────────── */
.wk-step .sv-prog.wk-watch.wk-now2{flex:0 0 calc(100% - var(--wk-tx,36px));order:4;display:flex;gap:14px;
  align-items:flex-start;margin:9px 0 5px var(--wk-tx,36px);max-width:540px;min-width:0;box-sizing:border-box}
.wk-step.done .sv-prog.wk-watch.wk-now2{display:none}
.wn2-frame{position:relative;flex:0 0 auto;width:118px;aspect-ratio:9/16;
  border-radius:10px;overflow:hidden;background:var(--lav-08,rgba(175,105,238,.08))}
.wn2-frame video,.wn2-frame .wn2-still{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.wn2-frame video{opacity:0;transition:opacity .25s ease}
.wk-now2.wn2-ready:not(.wn2-stills) .wn2-frame video{opacity:1}
.wn2-frame .wn2-still{opacity:1;transition:opacity .2s ease}
.wk-now2.wn2-ready:not(.wn2-stills) .wn2-frame .wn2-still{opacity:0}
.wn2-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible;z-index:3}
/* the scan line walks while her EYES do (and while the scorer weighs, and
   while the fast parts are found - faster, because that pass is a skim) */
.wn2-scan{position:absolute;left:0;right:0;height:2px;z-index:4;opacity:0;
  background:linear-gradient(90deg,transparent,var(--lav,#AF69EE),transparent);
  box-shadow:0 0 10px rgba(175,105,238,.55)}
.wk-now2[data-pass="eyes"] .wn2-scan,.wk-now2[data-pass="stills"] .wn2-scan,
.wk-now2[data-pass="who"] .wn2-scan,.wk-now2[data-pass="weigh"] .wn2-scan{
  opacity:.9;animation:wn2scan 2.6s ease-in-out infinite}
.wk-now2[data-pass="frames"] .wn2-scan{opacity:.9;animation:wn2scan .95s linear infinite}
@keyframes wn2scan{0%{top:3%}50%{top:95%}100%{top:3%}}
/* her EARS: a small drawn pulse in the corner instead of a line on the picture */
.wn2-wave{position:absolute;left:8px;bottom:8px;z-index:4;display:flex;gap:2px;
  align-items:flex-end;height:15px;opacity:0;transition:opacity .2s ease}
.wn2-wave i{display:block;width:2.5px;border-radius:2px;background:var(--lav,#AF69EE);
  height:30%;box-shadow:0 0 6px rgba(175,105,238,.6)}
.wk-now2[data-pass="ears"] .wn2-wave,.wk-now2[data-pass="sound"] .wn2-wave{opacity:1}
.wk-now2[data-pass="ears"] .wn2-wave i,.wk-now2[data-pass="sound"] .wn2-wave i{
  animation:wn2wave 1.05s ease-in-out infinite}
.wn2-wave i:nth-child(2){animation-delay:-.2s!important}
.wn2-wave i:nth-child(3){animation-delay:-.45s!important}
.wn2-wave i:nth-child(4){animation-delay:-.7s!important}
.wn2-wave i:nth-child(5){animation-delay:-.9s!important}
@keyframes wn2wave{0%,100%{height:25%}50%{height:100%}}
.wn2-eye{position:absolute;right:5px;bottom:5px;width:23px;height:17px;z-index:5;opacity:.95}
.wn2-eye svg{width:100%;height:100%;overflow:visible;display:block}
.wn2-eye .ic-eye{transform-origin:28px 20px;animation:icBlink 3.7s ease-in-out infinite}
.wn2-eye .ic-pupil{transform-origin:28px 20px;animation:icLook 4.2s ease-in-out infinite}

.wn2-meta{flex:1 1 auto;min-width:0;padding-top:1px}
.wn2-top{display:flex;align-items:baseline;gap:10px;min-width:0}
.wn2-sense{flex:1 1 auto;min-width:0;font-family:var(--pen,'Caveat',cursive);
  font-size:17px;line-height:1.2;color:var(--lav,#AF69EE)}
.wn2-t{flex:0 0 auto;font-family:var(--sans,Inter,sans-serif);font-size:12px;
  color:var(--mute,#8C887E);font-variant-numeric:tabular-nums;white-space:nowrap}
.wn2-bar{position:relative;height:3px;border-radius:3px;margin:7px 0 0;
  background:var(--lav-16,rgba(175,105,238,.16))}
.wn2-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;width:0;
  background:var(--lav,#AF69EE);transition:width .5s linear,opacity .3s ease}
/* a pass that looks at the whole clip, not at one second of it */
.wk-now2.wn2-whole .wn2-fill{opacity:.38}
/* the fast moments she found, marked where they are */
.wn2-spk{position:absolute;inset:-4px 0;pointer-events:none}
.wn2-spk b{position:absolute;top:0;bottom:0;min-width:3px;border-radius:2px;
  background:rgba(175,105,238,.28);box-shadow:inset 0 0 0 1px rgba(175,105,238,.35)}
/* what she just saw / heard - one line, her voice, the second it landed */
.wn2-now{margin:8px 0 0;min-height:1.45em;font-family:var(--serif,Georgia,serif);
  font-size:13.5px;line-height:1.45;color:var(--ink-soft,var(--mute,#6d685f));
  font-style:italic;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;opacity:0;transform:translateY(2px)}
.wn2-now.on{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
.wn2-now .wn2-q{color:var(--lav,#AF69EE);font-style:normal}
/* the passes, in the order they really run */
.wn2-ps{display:flex;flex-wrap:wrap;gap:3px 12px;margin:9px 0 0;
  font-family:var(--sans,Inter,sans-serif);font-size:12px;line-height:1.4}
.wn2-p{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  color:var(--soft,#B9B4A9)}
.wn2-p .wn2-pm{flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  box-shadow:inset 0 0 0 1.3px currentColor;opacity:.75}
.wn2-p.live{color:var(--lav,#AF69EE);font-weight:600}
.wn2-p.live .wn2-pm{background:var(--lav,#AF69EE);box-shadow:none;opacity:1;
  animation:wn2dot 1.1s ease-in-out infinite}
.wn2-p.done{color:var(--mute,#8C887E)}
.wn2-p.done .wn2-pm{width:10px;height:8px;border-radius:0;box-shadow:none;opacity:1;
  background:none;position:relative}
.wn2-p.done .wn2-pm::after{content:"";position:absolute;left:1px;top:-1px;width:4px;height:7px;
  border:solid #1B8A5A;border-width:0 1.8px 1.8px 0;transform:rotate(40deg)}
[data-theme="dark"] .wn2-p.done .wn2-pm::after{border-color:#5FD39B}
.wn2-p.skip{display:none}
@keyframes wn2dot{0%,100%{transform:scale(.8);opacity:.7}50%{transform:scale(1.15);opacity:1}}

/* the phone: the same break as the phone layer (_mob.css, 880px) and its floor -
   nothing under 12px, her hand at 16 */
@media (max-width:880px){
  .wk-step .sv-prog.wk-watch.wk-now2{flex-basis:100%;margin-left:0;max-width:none;gap:12px}
  .wn2-frame{width:92px}
  .wn2-sense{font-size:16px}
  .wn2-t{font-size:12px}
  .wn2-now{font-size:13.5px}
  .wn2-ps{gap:3px 10px;font-size:12px}
}
html[data-motion="reduced"] .wn2-scan,html[data-motion="reduced"] .wn2-wave i,
html[data-motion="reduced"] .wn2-eye .ic-eye,html[data-motion="reduced"] .wn2-eye .ic-pupil,
html[data-motion="reduced"] .wn2-p.live .wn2-pm{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .wn2-scan,.wn2-wave i,.wn2-p.live .wn2-pm{animation:none!important}
}

/* ── 2. what each job found ────────────────────────────────────────────── */
.wk-step.wk-hasres{flex-wrap:wrap}
/* the width is what is left of the row after the offset - a 100% basis plus
   the offset pushed the line past the phone's edge */
.wk-step > .wk-res{flex:0 0 calc(100% - var(--wk-tx,36px));order:5;min-width:0;max-width:680px;
  margin:1px 0 1px var(--wk-tx,36px);box-sizing:border-box;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
  font-family:var(--sans,Inter,sans-serif);font-size:13px;line-height:1.45;
  color:var(--mute,#8C887E)}
.wk-res .wkr-t{min-width:0;overflow-wrap:anywhere}
.wk-res.wk-res-long .wkr-t{font-family:var(--serif,Georgia,serif);font-style:italic;
  font-size:14px;color:var(--mute,#6d685f)}
/* one toggle for a row's list and for her thinking: "more ›" / "less" */
.wk-res .wkr-more,.wk-think .wkt-more{-webkit-appearance:none;appearance:none;background:none;border:0;
  padding:0 2px;margin:0;cursor:pointer;font-family:var(--sans,Inter,sans-serif);font-size:12.5px;
  font-style:normal;font-weight:500;color:var(--lav,#AF69EE);white-space:nowrap;line-height:1.45;
  display:inline-flex;align-items:center;gap:3px}
.wkr-more .wkr-chev,.wkt-more .wkr-chev{display:inline-block;transition:transform .16s ease;font-size:14px;line-height:1}
.wkr-more.open .wkr-chev,.wkt-more.open .wkr-chev{transform:rotate(90deg)}
.wkr-more:focus-visible,.wkt-more:focus-visible{outline:2px solid var(--lav-16,rgba(175,105,238,.3));
  outline-offset:2px;border-radius:4px}
.wk-res .wkr-x{flex:0 0 100%;margin:4px 0 3px;padding:2px 0 2px 11px;
  border-left:2px solid var(--lav-16,rgba(175,105,238,.22))}
.wk-res .wkr-x[hidden]{display:none!important}
.wk-res .wkr-i{font-size:12.5px;line-height:1.5;color:var(--mute,#8C887E);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a finished checklist folded shut still shows nothing of this until opened */
.wk-workline.wk-folded:not(.wk-open) .wk-res,
.wk-workline.wk-folded:not(.wk-open) .wk-think{display:none}

/* ── 3. her thinking ───────────────────────────────────────────────────── */
.wk-step > .wk-think{flex:0 0 calc(100% - var(--wk-tx,36px));order:6;position:relative;min-width:0;
  max-width:640px;margin:3px 0 4px var(--wk-tx,36px);padding:1px 0 1px 11px;box-sizing:border-box;
  border-left:2px solid var(--lav-16,rgba(175,105,238,.22))}
.wk-think .wkt-body{font-family:var(--serif,Georgia,serif);font-style:italic;
  font-size:14px;line-height:1.55;color:var(--ink-soft,var(--mute,#6d685f));
  max-height:4.9em;overflow:hidden;overflow-wrap:anywhere}
.wk-step.live > .wk-think .wkt-body{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 1.4em);
          mask-image:linear-gradient(to bottom,transparent 0,#000 1.4em)}
.wk-step.done > .wk-think .wkt-body{max-height:3.2em;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
.wk-think.open .wkt-body{max-height:none!important;-webkit-mask-image:none!important;
  mask-image:none!important}
.wk-think .wkt-body p{margin:0 0 .45em}
.wk-think .wkt-body p:last-child{margin-bottom:0}
.wk-think .wkt-body .wkt-h{display:block;font-family:var(--sans,Inter,sans-serif);
  font-style:normal;font-weight:600;font-size:12px;letter-spacing:.02em;
  text-transform:none;color:var(--lav,#AF69EE);margin:0 0 2px}
.wk-think .wkt-body .wkt-in{animation:wktin .45s ease both}
@keyframes wktin{from{opacity:0}to{opacity:1}}
.wk-think .wkt-more{margin:3px 0 1px}
.wk-think.short .wkt-more{display:none}

@media (max-width:880px){
  .wk-step > .wk-res,.wk-step > .wk-think{max-width:none}
  .wk-res .wkr-more{padding:6px 4px;margin:-6px 0}
  .wk-think .wkt-more{padding:6px 4px;margin:-3px 0 -5px}
  .wk-res .wkr-i{white-space:normal}
  .wk-think .wkt-body .wkt-h{font-size:12px}
}

/* ── THE WORD OVER THE WHOLE JOB (jobs.js section 4) ─────────────────────────
   "working" is now what she is doing this second - thinking, writing,
   watching, listening, reading... - over the same whole-turn clock. A new
   word arrives rather than blinking in; nothing moves for reduced motion. */
@keyframes wktSwap{from{opacity:.15;transform:translateY(3px)}to{opacity:1;transform:none}}
.wk-total[data-wstart] .wk-total-t.wkt-swap{animation:wktSwap .4s ease-out both}
html[data-motion="reduced"] .wk-total[data-wstart] .wk-total-t.wkt-swap{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .wk-total[data-wstart] .wk-total-t.wkt-swap{animation:none!important}
}